<template>
	<view class="home position-relative">
		<view class="bg-1a padding-top-40 padding-lr-30 width-100p status">
			<view v-if="detail.status==0">
				<view class="status_top">待支付</view>
			</view>
			<view v-if="detail.status==1">
				<view class="status_top">待发货</view>
				<!-- <view style="margin-top: 15rpx;">{{formatTimestamp(detail.pay_time)}}</view> -->
			</view>
			<view v-if="detail.status==2">
				<view class="status_top">
					<view>待收货</view>
					<view>已发货，注意查收</view>
				</view>
				<!-- <view style="margin-top: 15rpx;">{{formatTimestamp(detail.pay_time)}}</view> -->
			</view>
			<view v-if="detail.status==3">
				<view class="status_top">已完成</view>
				<!-- <view style="margin-top: 15rpx;">{{formatTimestamp(detail.pay_time)}}</view> -->
			</view>
			<view v-if="detail.status==4">
				<view class="status_top">已取消</view>
				<!-- <view style="margin-top: 15rpx;">{{formatTimestamp(detail.cancel_time)}}</view> -->
			</view>
			<view v-if="detail.status==5">
				<!-- <view class="status_top">退货退款</view> -->
				<view class="status_top" v-if="detail.back_info.refund_sh_status==1">申请退款</view>
				<view class="status_top" v-if="detail.back_info.refund_sh_status==2">审核通过</view>
				<view class="status_top" v-if="detail.back_info.refund_sh_status==3">拒绝</view>
				<view style="margin-top:5rpx;" v-if="detail.back_info.refund_sh_status==3">
					后台审核中/审核通过/事核不通过，{{detail.back_info.refund_sh_cause}}</view>
				<!-- <view style="margin-top: 15rpx;">{{formatTimestamp(detail.createtime)}}</view> -->
				<view style="margin-top: 15rpx;">{{detail.createtime}}</view>
			</view>
		</view>
		<view class="padding-lr-30 position-relative" style="margin-top: -60rpx;">
			<view class="bg-ff bg-shadow radius-40 padding-30 info" v-if="detail.address">
				<view class="info_address">{{detail.address}}</view>
				<view class="info_name">
					<text>{{detail.linkman}}</text>
					<text style="margin-left:20rpx;">{{detail.linkphone}}</text>
				</view>
			</view>
			<view class="bg-ff bg-shadow radius-40 padding-30 margin-top-40">
				<view class="goods flex_row" v-for="(item,index) in detail.item" :key="index">
					<image :src="item.goodimage" mode=""></image>
					<view class="goods_right flex_ud">
						<view class="goods_name">{{item.goodname}}</view>
						<!-- <view class="goods_name2">规格：{{item.specs}}</view> -->
						<view class="goods_price flex_lr">
							<view style="color:#ff0000;"><text style="font-size:26rpx;"></text>{{item.total}}妖币</view>
							<view>数量：{{item.num}}</view>
						</view>
					</view>
				</view>
				<view class="price flex" style="flex-direction: row-reverse">
					<view>小计：<text style="color:#ff0000;"><text
								style="font-size: 24rpx;;"></text>{{detail.total}}妖币</text></view>
				</view>
			</view>
			<view class="bg-ff bg-shadow radius-40 padding-30 margin-top-40">
				<view class="flex" v-if="detail.address">
					<view class="text-28 text-66">配送费</view>
					<view class="flex-one text-right text-28">{{detail.postage}}</view>
				</view>
				<view class="flex" v-else>
					<view class="text-28 text-66">下单号码(后4位)</view>
					<view class="flex-one text-right text-28">{{men.mobile.slice(men.mobile.length-4)}}</view>
				</view>
				<!-- <view class="flex margin-top-30">
					<view class="text-28 text-66">优惠券</view>
					<view class="flex-one text-right text-28">优惠券</view>
				</view> -->
				<view class="flex margin-top-30">
					<view class="text-28 text-66">留言</view>
					<view class="flex-one text-right text-28">{{detail.remarks||''}}</view>
				</view>
				<view class="line"></view>
				<view class="flex margin-top-30">
					<view class="text-28 text-66" style="font-weight: blod;">合计</view>
					<view style="color:#ff0000;font-size: 30rpx;" class="margin-left-10"><text
							style="font-size:26rpx;"></text>{{detail.amount}}妖币
					</view>
				</view>
			</view>
			<view class="bg-ff bg-shadow radius-40 padding-30 margin-top-40">
				<view class="flex">
					<view class="text-28 text-66">订单号</view>
					<view class="flex flex-one">
						<view class="flex-one text-right text-28">{{detail.order_no}}</view>
						<view class="copybtn" @click="copyText">复制</view>
					</view>
				</view>
				<view class="flex margin-top-30">
					<view class="text-28 text-66">下单时间</view>
					<view class="flex-one text-right text-28">{{detail.createtime}}</view>
				</view>
				<!-- <view class="flex margin-top-30">
					<view class="text-28 text-66">支付时间 </view>
					<view class="flex-one text-right text-28">{{formatTimestamp(detail.pay_time)}}</view>
				</view> -->
			</view>
			<view class="tip padding-top-30" style="margin: 0;" v-if="detail.status==3">说明：商品发货后14天将自动收货。</view>
			<view class="bg-ff bg-shadow radius-40 padding-30 margin-top-40" v-if="detail.status==5">
				<view class="flex">
					<view class="text-28 text-66">申请退货退款时间</view>
					<view class="flex-one text-right text-28">{{detail.back_info.refund_time}}</view>
				</view>
				<view class="flex margin-top-30">
					<view class="text-28 text-66">审核状态</view>
					<view class="flex-one text-right text-28">{{detail.back_info.refund_sh_cause}}</view>
				</view>
				<view class="flex margin-top-30">
					<view class="text-28 text-66">反馈时间</view>
					<view class="flex-one text-right text-28">{{detail.back_info.refund_sh_time}}</view>
				</view>
			</view>
			<view class="bg-ff bg-shadow radius-40 padding-30 margin-top-40" v-if="detail.status==5">
				<view class="flex">
					<view class="text-28 text-66">快递公司</view>
					<view class="flex-one text-right text-28">{{detail.express_name}}</view>
				</view>
				<view class="flex margin-top-30">
					<view class="text-28 text-66">快递单号</view>
					<view class="flex-one text-right text-28">{{detail.express_no}}</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="flex_lr" v-if="detail.status==1">
				<button class="wbtn1" open-type="contact">联系客服</button>
				<!-- <view class="wbtn1">联系客服</view> -->
				<view class="bbtn1" @click="getcancelshow">取消订单</view>
			</view>
			<view class="flex_lr" v-if="detail.status==2">
				<button class="wbtn2" open-type="contact">联系客服</button>
				<!-- <view class="wbtn2">联系客服</view> -->
				<view class="flex_row">
					<!-- <view class="bbtn2" @click="go('pages/order/returnGoods?id='+id)">申请售后</view> -->
					<view class="bbtn2"
						@click="go('pages/order/logisticsDetails?id='+id+'&order_no='+detail.order_no+'&express_name='+detail.express_name+'&express_no='+detail.express_no+'&type=1')">
						查看物流</view>
					<view class="bbtn2" @click="getconfirmshow">确认收货</view>
				</view>
			</view>
			<view class="flex_lr" v-if="detail.status==3">
				<view class="bbtn1" style="width:100%;"
					@click="go('pages/order/logisticsDetails?id='+id+'&order_no='+detail.order_no+'&express_name='+detail.express_name+'&express_no='+detail.express_no+'&type=1')">
					查看物流</view>
			</view>
			<view class="flex_lr" v-if="detail.status==5">
				<!-- <view class="wbtn2" @click="is_cancel_refund_show=true">撤销退换</view> -->
				<view class="flex_row">
					<view class="bbtn2"
						@click="go('pages/order/logisticsDetails?id='+id+'&order_no='+detail.order_no+'&express_name='+detail.express_name+'&express_no='+detail.express_no+'&type=1')">
						查看物流</view>
					<!-- <view class="bbtn2" @click="go('pages/order/express?id='+id)">填写寄回信息</view> -->
				</view>
			</view>
			<!-- <view class="tip" v-if="detail.status==5">说明：如退款，将原路返还。如退货，需填写快递单号。</view> -->
		</view>
		<!-- 取消订单浮层 -->
		<view class="layer flex align-center justify-center flex-direction" v-if="is_cancel_show"
			@click="getcancelshow">
			<view class="layer_cancel" @click.stop>
				<view class="text-34 text-bold text-center" style="padding: 64rpx 0;">确认取消订单</view>
				<view class="flex border-top-ed">
					<view class="flex-one border-right-ed text-32 text-bold text-66 text-center line-height-90"
						@click="getcancelshow">再想想</view>
					<view class="flex-one text-bold text-32 text-center line-height-90" @click="orderCancel">确认</view>
				</view>
			</view>
		</view>
		<!-- 确认收货浮层 -->
		<view class="layer flex align-center justify-center flex-direction" v-if="is_confirm_show"
			@click="getconfirmshow">
			<view class="layer_cancel" @click.stop>
				<view class="text-34 text-bold text-center" style="padding: 64rpx 0;">确认收货</view>
				<view class="flex border-top-ed">
					<view class="flex-one border-right-ed text-32 text-bold text-66 text-center line-height-90"
						@click="getconfirmshow">再想想</view>
					<view class="flex-one text-bold text-32 text-center line-height-90" @click="orderConfirm">确认</view>
				</view>
			</view>
		</view>
		<!-- 撤销退换浮层 -->
		<view class="layer flex align-center justify-center flex-direction" v-if="is_cancel_refund_show"
			@click="is_cancel_refund_show=false">
			<view class="layer_cancel" @click.stop>
				<view class="text-34 text-bold text-center" style="padding: 64rpx 0;">撤销退换</view>
				<view class="flex border-top-ed">
					<view class="flex-one border-right-ed text-32 text-bold text-66 text-center line-height-90"
						@click="is_cancel_refund_show=false">再想想</view>
					<view class="flex-one text-bold text-32 text-center line-height-90" @click="orderCancelRefund">确认
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: "",
				detail: {},
				is_cancel_show: false,
				is_confirm_show: false,
				is_cancel_refund_show: false,
				men: {},
			}
		},
		onLoad(options) {
			this.id = options.id
		},
		onShow() {
			this.getDetail()
			this.rq.getData('Wechat/user_info').then(res => {
				if (res.code == 1) {
					this.men = res.data
				}
			})
		},
		methods: {
			copyText() {
				uni.setClipboardData({
					data: this.detail.order_no,
					success() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						});
					}
				});
			},
			getDetail() {
				this.rq.getData('sign/order_info', {
					id: this.id
				}).then(res => {
					if (res.code == 1) {
						this.detail = res.data
					}
				})
			},
			formatTimestamp(timestamp) {
				// 创建一个Date对象，传入时间戳（以秒为单位）
				const date = new Date(timestamp * 1000);
				// 获取年、月、日、时、分、秒
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要+1
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				const seconds = String(date.getSeconds()).padStart(2, '0');
				// 拼接成目标格式
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			//取消订单
			orderCancel() {
				this.is_cancel_show = false
				this.rq.getData('sign/cancel_order', {
					id: this.detail.id
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							icon: 'none',
							title: '操作成功',
							success: () => {
								uni.navigateBack({
									delta: 1
								})
							}
						})
					}
				})
			},
			// 确认收货
			orderConfirm() {
				let that = this
				this.is_confirm_show = false
				this.rq.getData('sign/confirm_order', {
					id: this.detail.id
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							icon: 'none',
							title: '操作成功',
							success: () => {
								that.getDetail()
							}
						})
					}
				})
			},
			// 确认收货
			orderCancelRefund() {
				let that = this
				this.is_cancel_refund_show = false
				this.rq.getData('Memorder/cancel_refund', {
					id: this.detail.id
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							icon: 'none',
							title: '操作成功',
							success: () => {
								that.getDetail()
							}
						})
					}
				})
			},
			getcancelshow(){
				this.is_cancel_show = !this.is_cancel_show
			},
			getconfirmshow(){
				this.is_confirm_show = !this.is_confirm_show
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		width: 100%;
		min-height: 100vh;
		background: #fff;
		padding-bottom: 300rpx;
		font-family: simhei;
	}

	.status {
		color: #ffffff;
		font-size: 26rpx;
		padding-bottom: 80rpx;

		.status_top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 34rpx;
			font-weight: blod;
		}
	}

	.info {
		.info_address {
			font-size: 32rpx;
			font-weight: bold;
		}

		.info_name {
			font-size: 26rpx;
			color: #999;
			margin-top: 26rpx;
		}
	}

	.goods {
		margin-bottom: 20rpx;

		image {
			width: 150rpx;
			height: 150rpx;
			border-radius: 20rpx;
		}

		.goods_right {
			width: 0;
			flex: 1;
			height: 150rpx;
			margin-left: 30rpx;

			.goods_name {
				font-size: 32rpx;
				width: 100%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.goods_name2 {
				font-size: 28rpx;
				width: 100%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				color: #999;
			}

			.goods_price {
				font-size: 32rpx;
			}
		}
	}

	.price {
		fon-size: 34rpx;
		padding-top: 20rpx;
	}

	.line {
		width: 100%;
		height: 2rpx;
		background: #f5f5f5;
		margin: 40rpx 0 10rpx 0;
	}

	.copybtn {
		height: 40rpx;
		border-radius: 20rpx;
		font-size: 26rpx;
		line-height: 40rpx;
		text-align: center;
		padding: 0 20rpx;
		margin-left: 20rpx;
		border: 1rpx solid #000000;
	}

	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		background: #ffffff;
		padding: 30rpx 20rpx;

		.wbtn1 {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 48%;
			height: 80rpx;
			background: #ffffff;
			border-radius: 50rpx;
			border: 1rpx solid #000;
			font-size: 32rpx;
		}

		.bbtn1 {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 48%;
			height: 80rpx;
			background: #000;
			color: #fff;
			border-radius: 50rpx;
			font-size: 32rpx;
		}

		.wbtn2 {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 150rpx;
			height: 60rpx;
			background: #ffffff;
			border-radius: 50rpx;
			border: 1rpx solid #000;
			font-size: 24rpx;
		}

		.bbtn2 {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 170rpx;
			height: 60rpx;
			background: #000;
			color: #fff;
			border-radius: 50rpx;
			font-size: 24rpx;
			margin-left: 20rpx;
		}
	}

	.layer {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.6);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
	}

	.layer_cancel {
		width: 540rpx;
		background: #fff;
		border-radius: 16rpx;
		box-shadow: inset 0rpx -1rpx 0rpx 0rpx #E5E6EB;
	}

	.tip {
		font-size: 24rpx;
		margin: 10rpx 0;
		color: #999999;
	}
</style>